<template>
	<div class="oe-login" v-loading="loading">
		<div class="login-top">
			<div class="login-top-content">
				<img src="../assets/images/logo-school.png" alt />
				<div class="login-top-text">
					<span>智慧教育考试平台</span>
				</div>

				<a-tooltip placement="bottom" overlayClassName="tooltipss">
					<template slot="title">
						<div style="text-align: center; padding: 5px; display: inline-block; width: 50%">
							<img src="../assets/images/e-exam.png" style="display: block; width: 100%; height: 100%" alt />
							<a-button type="primary" style="margin-top: 10px; background: #bee1fd; color: #1890ff"><a href="https://exam.icve.com.cn/app/E-exam.apk" target="_blank" rel="noopener noreferrer">安卓下载</a>
							</a-button>
						</div>
						<div style="text-align: center; padding: 5px; display: inline-block; width: 50%">
							<img src="../assets/images/ios-exam1.png" style="display: block; width: 100%; height: 100%" alt />
							<a-button type="primary" style="margin-top: 10px; background: #bee1fd; color: #1890ff"><a href="https://apps.apple.com/cn/app/e%E8%80%83%E8%AF%95/id1519369930" target="_blank" rel="noopener noreferrer">IOS下载</a>
							</a-button>
						</div>
					</template>
					<div class="login-top-content_right">
						<img src="../assets/images/icon-mobil.png" alt />
						<span class="phone">客户端下载</span>
					</div>
				</a-tooltip>
				<div class="help">
					<img src="../assets/images/icon-help.png" alt />
					<a class="login-top-help" href="https://help.icve.com.cn/exam/" target="_blank"> 帮助中心 </a>
				</div>
			</div>
		</div>
		<div class="swiper">
			<swiper :options="swiperOptions">
				<swiper-slide v-for="(item,index) in slideList" :key="index">
          <img src="../assets/images/banner.png" class="swiper-item" alt="">
				</swiper-slide>
				<div class="swiper-button-prev" slot="button-prev"></div>
				<div class="swiper-button-next" slot="button-next"></div>
			</swiper>
			

			<div class="login-center-content">
				<div class="content">
					<div class="content-right">
						<p class="content-user">用户登录</p>

						<div class="select-box" v-if="schoolShow">
							<a-icon type="bank" style="color: #1e8dfd; font-size: 24px; position: absolute; z-index: 1; margin-left: 3px" />
							<a-select showSearch placeholder="请选择学校" v-model="schoolName" optionFilterProp="children" style="width: 100%; margin-bottom: 20px" :allowClear="true" :filterOption="false" @search="handleSearch" @change="handleChange" @focus="handleFocus">
								<a-select-option v-for="(item, index) in schoolList" :index="index" :key="item.id">{{
                  item.text
                }}</a-select-option>
							</a-select>
						</div>
						<a-input placeholder="请输入用户名" v-model="userName" ref="userNameInput" allow-clear>
							<a-icon slot="prefix" type="user" style="color: #1e8dfd; font-size: 24px" />
						</a-input>
						<a-input-password placeholder="请输入登录密码" v-model="password" ref="userNameInput">
							<a-icon slot="prefix" type="lock" style="color: #1e8dfd; font-size: 24px" />
						</a-input-password>
						<div class="verify-num">
							<a-input placeholder="请输入验证码" v-model="verifycode" ref="userNameInput" style="width: calc(100% - 110px); margin-right: 10px" @keyup.13="getLogin"></a-input>
							<img style="width: 100px; height: 32px; cursor: pointer;vertical-align: baseline;" id="verImg" :src="verImg" alt="验证码" title="看不清？点击更换" @click="getImg" />
						</div>
						<div class="content-exit">
							<a-checkbox @change="onChange">记住密码</a-checkbox>
							<div class="password-register">
								<a href="https://www.icve.com.cn/portal/resetPassword.html?dataSource=9"> 忘记密码</a>
							</div>
						</div>
						<div class="login-btn">
							<a-button type="primary" @click="getLogin">登录</a-button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="login-foot">
			<div class="login-foot-content">
				<div class="login-foot-left fl">
					<p>功能亮点</p>
					<div class="boots">
						<div class="item" v-for="(item, index) in bootList" :key="index" :style="`background-image:url(${item.bg})`">
							<!-- :style="`background-image: url('${item.bg}')`" -->
							<div class="foot-left-title">{{ item.title }}</div>
							<div class="c">{{ item.content }}</div>
						</div>
					</div>
					<a href="#">查看更多>></a>
				</div>
				<div class="login-foot-right fl">
					<p>通知公告</p>
					<div v-for="(item, index) in questionList" :key="index">
						<div class="q fl">{{ item.question }}</div>
						<div class="a fl">{{ item.time }}</div>
					</div>
					<a href="#">查看更多>></a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.min.css';
export default {
	name: 'Login',
	components: {
		swiper,
		swiperSlide,
	
	},
	data() {
		return {
			swiperOptions: {
				autoplay: {
					delay: 3000,
					disableOnInteraction: true,
				},
				loop: true,
				cube: {
					slideShadows: true,
					shadow: true,
					shadowOffset: 100,
					shadowScale: 0.6,
				},
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
				pagination: {
					el: '.swiper-pagination',
					type: 'bullets',
					clickable: true,
					// progressbarOpposite: true,
				},
			},
			slideList: [
				{
					id: '42',
					text: '424242424',
				},
				{
					id: '43',
					text: '43434343',
				},
			],
			schoolShow: false,
			userName: localStorage.getItem('userName') || '',
			password: localStorage.getItem('password') || '',
			schoolName: '',
			schoolId: '',
			schoolList: [],
			verifycode: '',
			verImg: '/api/portal/login/getVerifyCode',
			remenberMe: false,
			loading: false,
			itemList: [
				'userName',
				'userId',
				'schoolName',
				'schoolId',
				'displayName',
				'token',
				'userType',
				'avatorUrl',
				'remenberMe',
				'logoUrl',
				'__majorId__',
				'__batchId__',
				'password',
				'bacthId',
				'sortId',
				'file_system_url',
			],
			bootList: [
				{
					title: '智能化全流程',
					content: '智能快速导入建题，组卷、支持多人监考，批阅',
					bg: require('../assets/images/bg-bright-dot1.png'),
				},
				{
					title: '大数据职能支持',
					content: '智能快速导入建题，组卷、支持多人监考，批阅',
					bg: require('../assets/images/bg-bright-dot2.png'),
				},
				{
					title: '多终端支持',
					content: '智能快速导入建题，组卷、支持多人监考，批阅',
					bg: require('../assets/images/bg-bright-dot3.png'),
				},
				{
					title: '多方式防作弊',
					content: '智能快速导入建题，组卷、支持多人监考，批阅',
					bg: require('../assets/images/bg-bright-dot4.png'),
				},
			],
			questionList: [
				{
					question: '考试系统中题库分类功能有哪些用处?',
					time: '2022-04-01',
				},
				{
					question: '考试系统中题库分类功能有哪些用处?',
					time: '2022-04-01',
				},
				{
					question: '考试系统中题库分类功能有哪些用处?',
					time: '2022-04-01',
				},
				{
					question: '考试系统中题库分类功能有哪些用处?',
					time: '2022-04-01',
				},
				{
					question: '考试系统中题库分类功能有哪些用处?',
					time: '2022-04-01',
				},
				{
					question: '考试系统中题库分类功能有哪些用处?',
					time: '2022-04-01',
				},
				{
					question: '考试系统中题库分类功能有哪些用处?',
					time: '2022-04-01',
				},
			],
		};
	},
	mounted() {
		let ua = navigator.userAgent.toLowerCase();
		let MobileShow = /mobile/.test(ua) ? true : false;
		if (MobileShow) {
			location.href = 'https://exam.icve.com.cn/oeMobile/';
		}
		this.checkLogin();
		this.getSchoolList();
	},
	methods: {
		getUrl() {
			window.open('http://beian.miit.gov.cn', '_blank');
		},
		checkLogin() {
			this.$http.post('/api/portal/login/checkLogin').then((res) => {
				if (res.code === 1) {
					this.$router.push({
						name: res.url,
						params: {},
					});
				} else if (res.code === -1) {
					for (let i = 0; i < this.itemList.length; i++) {
						localStorage.removeItem(this.itemList[i]);
					}
				}
			});
		},
		handleChange(value) {
			this.schoolId = value;
		},
		handleFocus() {
			this.schoolName = '';
			this.getSchoolList();
		},
		filterOption(input, option) {
			return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
		},
		getImg() {
			var e = document.getElementById('verImg');
			e.src = this.verImg + '?t=' + Math.random();
		},
		getLogin() {
			this.loading = true;
			this.$http
				.post('/api/portal/login/login', {
					userName: this.userName, //用户名
					password: this.password, //密码
					schoolId: this.schoolId, //学校Id（第一次不传，当后台发现用户名和密码不唯一，会弹出学校列表选学校）
					verifycode: this.verifycode, //验证码
				})
				.then((res) => {
					this.loading = false;
					if (res.code > 0) {
						this.$message.success(res.msg);
						localStorage.setItem('userName', res.userName);
						localStorage.setItem('userId', res.userId);
						localStorage.setItem('schoolName', res.schoolName);
						localStorage.setItem('schoolId', res.schoolId);
						localStorage.setItem('displayName', res.displayName);
						localStorage.setItem('token', res.token);
						localStorage.setItem('userType', res.userType);
						localStorage.setItem('avatorUrl', res.avatorUrl);
						localStorage.setItem('remenberMe', res.remenberMe);
						localStorage.setItem('logoUrl', res.logoUrl);
						if (this.remenberMe) {
							localStorage.setItem('password', this.password);
						}
						if (res.url == 'current') {
							this.getList();
							this.getBacthList();
						} else {
							this.$router.push({
								name: res.url,
								params: {},
							});
						}
					} else if (res.code == -100) {
						this.$message.warning(res.msg);
						this.getSchoolList();
						this.schoolShow = true;
					} else {
						this.$message.error(res.msg);
						if (res.code == -2 || res.code == -1) {
							this.getImg();
							this.verifycode = '';
						}
					}
				});
		},
		// 分类列表
		getList() {
			this.$http.post('/api/study/sort/getList').then((res) => {
				if (res.list.length > 0) {
					localStorage.setItem('sortId', res.list[0].Id);
				} else {
					localStorage.setItem('sortId', '');
				}
				this.getBacthList();
			});
		},
		// 批次列表
		getBacthList() {
			this.$http
				.post('/api/study/batch/getList', {
					title: '',
					type: 1,
				})
				.then((rst) => {
					if (rst.code > 0) {
						localStorage.setItem('bacthId', rst.list[0].Id);
					} else {
						this.$message.error(rst.msg);
					}
					this.$router.push({
						name: 'current',
						params: {},
					});
				});
		},
		handleSearch(value) {
			this.schoolName = value;
			this.getSchoolList();
		},
		getSchoolList() {
			this.$http
				.post('/api/portal/login/getSchoolList', {
					q: this.schoolName,
				})
				.then((res) => {
					this.schoolList = res;
				});
		},
		// 记住密码
		onChange(e) {
			this.remenberMe = e.target.checked;
		},
	},
};
</script>

<style lang="scss" scoped>
@import '../style/login.scss';
</style>
